<template>
  <div>
    <Button v-if="show_global_button" class="yesya" style="z-index: 999; position: fixed; left: 50%; margin-left: -16px; background-color: #19be6b;"
      @click="value1 = true" type="primary">全局控制</Button>
    <Drawer  placement="top" type='primary' :closable="true" v-model="value1" style="color:red;">
      <n-button strong secondary round type="info" style="color: #17233d;border-radius: 10px 0 0 10px ; cursor:default ">
        导航
      </n-button>
      <n-button v-for="(item,index) in global_nav_text_first" :key=index  @click="go_to_section(item.value)" strong secondary round type="info">
        {{item.name}}
      </n-button>
      <n-button @click="go_to_section('')" strong secondary round type="info" >
        测试
      </n-button>
      <n-button @click="remove_global_bt" strong secondary round type="info" style="border-radius: 0 10px 10px 0; ">
        {{global_bt_txt}}
      </n-button>
    </Drawer>
    <div id="app">
        <router-view v-slot="{ Component, route }">
            <transition :name="route.meta.transition || 'fade'">
            <keep-alive :include="['life', 'life_text']">
              <component :is="Component" :key="getComponentKey(route)" />
            </keep-alive>
            </transition>
        </router-view>
    </div>
    <Confirm  :confirmText="'确定'"  :cancelText="'取消'"    :isVisible="show_confirm" @isconfirm="isconfirm"    @iscancel="iscancel" :message="'确定要关闭吗? \n如果关闭可以ctrl+o+alt开启！'"/>
  </div>
</template>

<script setup>
import { RouterView, useRouter } from 'vue-router';
import { ref, onMounted, inject } from 'vue';
import './static/css/alert.css'
import life from '../src/components/life/life_layout.vue';
import life_text from '../src/components/life/text/text.vue';
import music_play from '../src/components/function/music/render_music_play.vue';
import Confirm from './components/common/confirm.vue';
let global_nav_text_first = ref([
  {name:"首页",value:"index"},
  { name: "我的生活", value: "life" },
  { name: "八音盒", value: "music" },
  { name: "TV", value: "video" },
  { name: "千帆", value: "qianfan" },
  { name: "关于", value: "aboutthis" }
])

let value1 = ref(false);
let router = useRouter();
let show_global_button =inject('global_button')
let global_bt_txt = ref("移除模块")
let show_confirm=ref(false)
// 全局导航
const go_to_section = function (section) { 
   if (show_global_button.value) {
    router.push({ name: section }); 
  }else{ 
    const route = router.resolve({ name: section })
    window.open(route.href, '_blank');
  }
}

// 生成组件唯一的 key，避免复用
function getComponentKey(route) {
  const noCacheRoutes = ['music_play'];
  if (noCacheRoutes.includes(route.name)) {
    console.log(Number(Math.random(5)))
    return Number(Math.random(5));
  }
  return route.name;
}
// 全局导航状态控制
function remove_global_bt() { 

  if (show_global_button.value) {
    show_confirm.value=true
  } else {
    show_global_button.value = 1
    global_bt_txt.value = "移除模块";
    localStorage.setItem("show_global_button",1)
  }
}

function isconfirm() { 
  show_confirm.value = false;
  show_global_button.value = 0
  global_bt_txt.value = "打开模块";
  localStorage.setItem("show_global_button", 0)
  window.location.reload(true);
    // 强制刷新直接令本地缓存可用刷新
}
function iscancel() { 
  show_confirm.value = false;
  show_global_button.value = 1
  global_bt_txt.value = "移除模块";
  localStorage.setItem("show_global_button", 1)
  window.location.reload(true);
  // 强制刷新直接令本地缓存可用刷新
}

onMounted(() => {

  let first_title = document.querySelector(".ivu-drawer-header-inner");
  first_title.style.fontSize = "15px";
  first_title.style.fontWeight = '500';
   document.addEventListener('keydown', function(event) {
     if (event.ctrlKey && event.key === 'o' && event.altKey) {
      console.log(1)
          localStorage.setItem("show_global_button", 1)
          show_global_button.value=1
          event.preventDefault();
    }
});
});
</script>

<style scoped>
  button {
    margin: 5px;
  }
</style>